<template>
  <div class="">
    <!-- app-container -->
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="" prop="">
          <el-input v-model="queryParams.name" placeholder="请输入活动名称" clearable />
        </el-form-item>
        <el-form-item label="活动状态：" prop="">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="dict in statusList" :key="dict.id" :label="dict.value" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" style="margin: 10px 0 20px" @click="addClick">新增激励活动</el-button>
      </div>
      <el-table v-loading="loading" :data="tabList" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="活动名称" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="门店" align="center" prop="shopName" :show-overflow-tooltip="true"/>
        <el-table-column label="卡名称" align="center" prop="cardName" :show-overflow-tooltip="true"/>
        <el-table-column label="活动时间" align="center" prop="" :show-overflow-tooltip="true" width="150px">
          <template slot-scope="scope">
            <div>{{scope.row.startTime}}</div>
            <div>{{scope.row.endTime}}</div>
          </template>
        </el-table-column>
        <el-table-column label="活动名额" align="center" prop="stock" :show-overflow-tooltip="true" />
        <el-table-column label="已售数量" align="center" prop="soldStock" :show-overflow-tooltip="true" />
        <el-table-column label="剩余数量" align="center" prop="surplusStock" :show-overflow-tooltip="true" />
        <el-table-column label="活动状态" align="center" prop="" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <dict-tag :options="statusList" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="text" @click="editClick(scope.row)">查看</el-button> -->
            <el-button size="mini" type="text" @click="editClick(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList"></pagination>
    </div>
    <Dialog :id="dialogId" :pathType='pathType' v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible" @success="_handleSuccess">
    </Dialog>
  </div>
</template>

<script>
  import {
    packageList,
    punchActivityStatus,
    commodityDeactivate,
  } from "@/api/assetPackage/activityList";
  import Dialog from "@/views/assetPackage/components/dialog";
  export default {
    name: "",
    components: {
      Dialog
    },
    data() {
      return {
        dialogId: '',
        dialogVisible: false,
        // 遮罩层
        loading: false,
        // 导出遮罩层
        // 总条数
        total: 0,
        statusList: [], //状态字典数组
       
        //表格数据
        tabList: [],
        pathType: 'add',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: '', //活动名称
          status: '', //活动状态 shenye_punch_activity_status
        }
      };
    },
    created() {
      this.getStatusList();
      this.getList();
    },
    methods: {
      
      // 复制链接
      copyBtn(msg){
        // 创建输入框元素
        let oInput = document.createElement("input");
        // 将想要复制的值
        oInput.value = msg;
        // 页面底部追加输入框
        document.body.appendChild(oInput);
        // 选中输入框
        oInput.select();
        // 执行浏览器复制命令
        document.execCommand("Copy");
        // 弹出复制成功信息
        this.$message.success("复制成功");
        // 复制后移除输入框
        oInput.remove();

      },
      //获取活动状态字典
      getStatusList() {
        var dictType = "shenye_asset_package_status";
        this.$getSelectList(dictType)
          .then((res) => {
            var arr = [{
              id: "",
              value: "全部",
            }, ];
            this.statusList = arr.concat(res.result[0].dictList);
          })
          .finally(() => {

          });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        packageList(this.queryParams).then(response => {
          this.tabList = response.result.records;
          // this.tabList.forEach((item) => {
          //   if (item.stockType == 1) {
          //     item.total = '不限库存'
          //   }
          // })
          this.total = response.result.total;
          this.loading = false;
        });
      },
      // 表单重置
      reset() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          name: '', //活动名称
          couponType: '', //券类型 shenye_punch_activity_coupon_type
          status: '', //活动状态 shenye_punch_activity_status
          jackpotType:'',//奖池类型 1关闭 2开启shenye_punch_activity_jackpot_type
        };
        // this.resetForm("form");
        this.handleQuery()
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.reset();
        this.handleQuery();
      },
      //新增
      addClick() {
        this.dialogId = null
        this.dialogVisible = true;
        this.pathType = 'add'
      },
      // 编辑
      editClick(row) {
        this.dialogId = row.id
        this.pathType = 'edit'
        console.log(this.dialogStatus)
        this.dialogVisible = true;
      },
      //上下架
      upperLowerShelves(row,status) {
        let title = '上架'
        if (status == 2) {
          title = '上架'
        } else if(status == 3) {
          title = '下架'
        }
        this.$confirm('是否' + title + '?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: row.id,
            status: status
          }
          punchActivityStatus(data).then(response => {
            this.$message({
              type: 'success',
              message: title + '成功!'
            });
            this.getList();
          });
        }).catch(() => {});
      },
      releaseInventory(e) { //释放库存
        this.$confirm('是否释放库存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            punchActivityId: e.id
          }
          commodityDeactivate(data).then(res => {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.getList()
          });
        }).catch(() => {});
      },
      _handleSuccess(e) {
        //成功回调
        // this.resetQuery()
        this.getList()
      },
      jumpJackpot(row){
        this.$router.push({
          path: "jackpot",
          query: {
            id: row.id,
          },
        });
      },
    }
  };

</script>
<style scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }

  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .img_box {
    width: 100px;
    height: 80px;
    border-radius: 4px;
  }

</style>
